<template>
    <div>
        <el-card class="box-card">
            <div class="header-box">
                <span class="title-name">盘点单名称 :</span>
                <el-input class="handle-input" clearable v-model="header.valueName" placeholder="请输入内容"></el-input>
            </div>
            <div class="header-box">
                <span class="title-name">请选择盘点仓库 :</span>
                <el-select class="handle-select" clearable v-model="header.state" placeholder="请选择">
                    <el-option v-for="item in header.optionState" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </div>
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button type="info" icon="el-icon-refresh">重置</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="disable = true">添加盘点单</el-button>
        </el-card>
        <div class="container">
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column type="index" label="序号" width="60" align='center'>
                    <template slot-scope="scope">
                        {{ scope.$index + (query.pageNum - 1) * query.pageSize + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="盘点单名称" align='center'></el-table-column>
                <el-table-column prop="name" label="创建人" align='center'></el-table-column>
                <el-table-column prop="name" label="盘点仓库" align='center'></el-table-column>
                <el-table-column prop="name" label="开始盘点时间" align='center'></el-table-column>
                <el-table-column prop="name" label="完成盘点时间" align='center'></el-table-column>
                <el-table-column prop="name" label="状态" align='center'></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" class="mr10" @click="visible = true">详细</el-link>
                        <el-link type="danger" class="mr10" @click="del()">删除</el-link>
                        <el-link type="primary" class="mr10" @click="subshow = true">提交盘点</el-link>
                        <el-link type="primary" class="mr10" @click="resultshow = true">盘点结果</el-link>

                    </template>
                </el-table-column>
            </el-table>
            <div class=" pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                    :page-size="query.pageSize" :total="query.pageTotal"
                    @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
        <ventorydetail @close="visible = false" :visible="visible"></ventorydetail>
        <ventoryadd @close="disable = false" :disable="disable"></ventoryadd>
        <ventorysubmit @close="subshow = false" :subshow="subshow"></ventorysubmit>
        <ventoryresult @close="resultshow = false" :resultshow="resultshow"></ventoryresult>
    </div>
</template>

<script>
import ventorydetail from './components/ventory_detail.vue'
import ventoryadd from './components/ventory_add.vue'
import ventorysubmit from './components/ventory_submit.vue'
import ventoryresult from './components/ventory_result.vue'
export default {

    data() {
        return {
            resultshow: false,
            subshow: false,
            disable: false,
            visible: false,
            header: {
                valueName: "", //名称
                state: "", //状态
            },
            query: {
                pageNum: 1,
                pageSize: 15,
                pageTotal: 0,
            },
            tableData: [{ name: '测试', state: '1' }, { name: '测试', state: '0' }],
        };
    },
    components: {
        ventorydetail,
        ventoryadd,
        ventorysubmit,
        ventoryresult
    },
    mounted() {

    },
    methods: {
        handlePageChange(val) {
            this.query.pageNum = val;

        },
        del() {
            this.$confirm('此操作将永久删除该条数据信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
};
</script>

<style scoped>
.header-box {
    display: inline-block;
}

.title-name {
    font-size: 14px;
    margin-right: 10px;
}

.handle-input {
    width: 220px;
    margin-right: 10px;
}

.handle-select {
    width: 220px;
    margin-right: 10px;
}


.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}
</style>
